<template>
  <ECharts class="chart" :option="option" />
</template>

<script setup>
import ECharts from 'vue-echarts';
import { ref, computed } from 'vue';
import * as echarts from 'echarts';
import chinaMapJson from '../../Visualization/china.json';

// 注册地图
echarts.registerMap('china', chinaMapJson); 

const props = defineProps({
  tableData: {
    type: Array,
    required: true
  }
});


const formatMapData = () => {
  return props.tableData.map(item => ({
    name: item.region,
    value: Number(item.data) 
  }))
}

const option = computed(() => ({
  title: {
    text: '各地区嫌疑人统计',
    left: 'center',
    top: 10,
    textStyle: {
      fontSize: 24,
      fontWeight: 'bold',
      color: '#333'
    }
  },
  tooltip: {
    triggerOn: "click",
    formatter: (params) => {
      const value = Number(params.value);
      return value === 0.5 
        ? `${params.name}：有疑似嫌疑人` 
        : `${params.seriesName}<br/>${params.name}：${params.value}`;
    }
  },
  visualMap: {
    min: 0,
    max: 100000,
    left: 26,
    bottom: 40,
    showLabel: true,
    text: ["高", "低"],
    pieces: [
      { gt: 10000, label: "> 10000人", color: "#7f1100" },
      { gte: 1000, lte: 10000, label: "1000 - 10000人", color: "#ff5428" },
      { gte: 100, lt: 1000, label: "100 - 1000人", color: "#ff8c71" },
      { gte: 10, lt: 100, label: "10 - 100人", color: "#ffd768" },
      { gte: 1, lt: 10, label: "1 - 10人", color: "#BEDAEE" }
    ],
    show: true
  },
  geo: {
    map: "china", 
    roam: true,
    scaleLimit: { min: 1, max: 2 },
    zoom: 1.13,
    top: 50,
    label: {
      show: true,
      fontSize: 14,
      color: "rgba(0,0,0,0.7)"
    },
    itemStyle: {
      borderColor: "rgba(0, 0, 0, 0.2)"
    },
    emphasis: {
      areaColor: "#f2d5ad",
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      borderWidth: 0
    }
  },
  series: [
    {
      name: "抓捕嫌疑人数量",
      type: "map",
      geoIndex: 0,
      data: formatMapData() 
    }
  ]
}));
</script>

<style scoped>
.chart {
  width: 100%;
  height: 800px;
  margin: 20px auto;
}
</style>